<template>
	<div class="search-detail">
		<div class="sd-header">
			<div class="sd-mainpic">
				<image :src="poster.url ? poster.url : haibaoimg" mode="widthFix"></image>
			</div>
			<div class="sd-main-info">
				<div class="sd-main-name">
					{{ poster.mc }}
					<div class="rating_num"><text>{{ poster.pf }}</text></div>	
				</div>
				<div class="rating_self">
					<van-rate  allow-half class="rating_star" :value="stars" readonly /> 
					
				</div>
				<div class="sd-main-list">
					<div :class="isActive[0].isActived ? 'sd-main-list-item active' : 'sd-main-list-item'" data-item="0" bindtap='toggleActive'>题材：{{ poster.lx }}</div>
					<div :class="isActive[1].isActived ? 'sd-main-list-item active' : 'sd-main-list-item'" data-item="1" bindtap='toggleActive'>编剧：{{ poster.bj }}</div>
					<div :class="isActive[2].isActived ? 'sd-main-list-item active' : 'sd-main-list-item'" data-item="2" bindtap='toggleActive'>导演：{{ poster.dy }}</div>
					<div :class="isActive[3].isActived ? 'sd-main-list-item active' : 'sd-main-list-item'" data-item="3" bindtap='toggleActive'>制片人：{{ poster.zpr }}</div>
				</div>
			</div>
		</div>
		<van-tabs swipeable custom-class="tabs-bomt-blue" style="background-color:#0072ff" @click="onChangeNav">
			<van-tab title="基础信息">
				<div class="sd-item">
					<div class="sd-card">
						<div class="sd-card-title">
							<van-icon class="icon" name="https://cdn.xtde.cn/wxapp/xtde/img-icons/ju-icon1.png" />
							角色信息
						</div>
						<div class="sd-card-cont">
							<van-row gutter="20">
								<block v-if="isRoleInfoloading">
									<div class='skeleton-table-item' style='padding: 15rpx;'>
										<van-skeleton :row="3"></van-skeleton>
									</div> 	
								</block>
								<block v-else-if="roleInfoList.length !== 0" >
									<van-col span="6" v-for="(item, index) in roleInfoList" :data-index ='index' :key="index">
										<div class='role-info' :data-roleID="item.wid" @click='toActorDetailPage'>
											<div class='avatar'>
												<image :src="item.url ? item.url : touxiang" mode="widthFix"></image>
											</div>
											<div class='name'>{{ item.name }}</div>
											<div class='role'>
												<block v-if="item.role">饰 {{ item.role }}</block>
											</div>
										</div>
									</van-col>
								</block>
								<block v-else>
									<div class="chart-box">
										<div class='nodata' style='padding:140rpx 0 0;background-position:center 0;'>
											<div>无数据显示</div>
										</div>
									</div>
								</block>
							</van-row>
						</div>
					</div>
				</div>
			</van-tab>
			<van-tab title="制作公司">
				<div class="sd-item">
					<div class="sd-card">
						<div class="sd-card-title">
							<van-icon class="icon" name="https://cdn.xtde.cn/wxapp/xtde/img-icons/ju-icon2.png" />
							制作公司历史作品
						</div>
						<div class="sd-card-cont">
							<div class="table">
								<div class="tr bg-w">
									<div class="th w1">公司</div>
									<div class="th w2">题材</div>
									<div class="th w3">年份</div>
									<div class="th w4">备案</div>
									<div class="th w5">发行</div>
								</div>
								<block v-if="ishistoryloading">
									<div class='skeleton-table-item' style='padding: 15rpx;' v-for="index in skeleton" :key="index">
										<wux-skeleton active>
											<wux-skeleton-paragraph />
										</wux-skeleton>
									</div> 	
								</block>
								<block v-else-if="historytableData.length !== 0">
									<div :class="index % 2 === 1 ? 'tr bg-g':'tr'" v-for="(item, index) in historytableData" :data-index ='index' :key="index">
										<div class="td w1">{{item.dw}}</div>
										<div class="td w2">{{item.genres}}</div>
										<div class="td w3">{{item.rq}}</div>
										<div class="td w4">{{item.total1}}</div>
										<div class="td w5">{{item.total2}}</div>
									</div>
								</block>
								<block v-else>
									<div class="chart-box">
										<div class='nodata' style='padding:140rpx 0 0;background-position:center 0;'>
											<div>无数据显示</div>
										</div>
									</div>
								</block>
							</div>
						</div>
					</div>
					<div class="sd-card">
						<div class="sd-card-title">
							<van-icon class="icon" name="https://cdn.xtde.cn/wxapp/xtde/img-icons/ju-icon3.png" />
							题材占比
						</div>
						<div class="sd-card-cont">
							<block v-if="isthemeChartloading">
								<div class='skeleton-table-item' style='padding: 15rpx;'>
									<van-skeleton :row="3"></van-skeleton>
								</div> 	
							</block>
							<block v-else-if="!hasthemeChartData">
								<van-row gutter="15">
									<van-col span="12">
										<div style='position: relative;' v-if="themeItem1">
											<div class="chartInnerText">
												<div class='value'>{{ themeItem1.total }}</div>
												<div class='name'>{{ themeItem1.name }}</div>
											</div>  
											<div style="width:100%;height:400rpx;">
												<ff-canvas id="compertheme1" canvas-id="pieSelect" :opts="themeOpts1"></ff-canvas>
											</div>
											<div class='chartbomtText'>备案</div>
										</div>	
									</van-col>
									<van-col span="12">
										<div style='position: relative;' v-if="themeItem2">
											<div class="chartInnerText">
												<div class='value'>{{ themeItem2.total }}</div>
												<div class='name'>{{ themeItem2.name }}</div>
											</div>  
											<div style="width:100%;height:400rpx;">
												<ff-canvas id="compertheme2" canvas-id="pieSelect" :opts="themeOpts2"></ff-canvas>
											</div>
											<div class='chartbomtText'>发行</div>
										</div>	
									</van-col>
								</van-row>	
							</block>
							<block v-else>
								<div class="chart-box">
									<div class='nodata' style='padding:140rpx 0 0;background-position:center 0;'>
										<div>无数据显示</div>
									</div>
								</div>
							</block>	
						</div>
					</div>
				</div>		
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
	export default {
		props: {
			poster: { type: Object,  default() {return {}} },
			stars: { type: Number, default: 0 },
			roleInfoList: { type: Array, default() {return []} },
			isRoleInfoloading: { type: Boolean, default: true},
			param1: { type: String, default: "" },
			param2: { type: String, default: "" },
			sourceType: { type: String, default: "" }
		},
		data () {
			return {
				haibaoimg: 'https://cdn.xtde.cn/wxapp/xtde/haibao.png',
				touxiang: 'https://cdn.xtde.cn/wxapp/xtde/touxiang.jpg',
				themeOpts1: {
					lazyLoad: true
				},
				themeOpts2: {
					lazyLoad: true
				},
				themeItem1: {},
				themeItem2: {},
				hasthemeChartData: false,
				isthemeChartloading: false,
				ishistoryloading: false,
				historytableData: [],
				skeleton: [1, 2, 3],
				isActive: [
					{ isActived: false },
					{ isActived: false },
					{ isActived: false },
					{ isActived: false },
				]
			}
		},
		methods: {
			toggleActive(e) {
				var _this = this
				let i = e.target.dataset.item
				let isActived = 'isActive[' + i + '].isActived';
				_this[isActived] = !this.isActive[i].isActived;
			},
			// 切换基础信息/制作公司/播出情况
			onChangeNav(event) {
				if (event.detail.index === 1 && this.historytableData.length === 0) { 
				this.getHistory(this.param1)
				this.getThemeChart(this.param1)  
				}
			},
			toActorDetailPage(e) {
				uni.navigateTo({
					url: '/pages/search/search-detail/actor-detail/actor-detail?id=' + e.currentTarget.dataset.roleid
				})
			},
			getHistory(mc) {
				this.ishistoryloading = true;
				let apiMap = { "1": "getMakeTeleplayHistoryList", "2": "getMakeFilmHistoryList" };
				API[`${apiMap[this.data.sourceType]}`]({ mc: mc }).then((res) => {
					if (res.data.length !== 0) {
						this.historytableData = res.data;
						this.ishistoryloading = false;
					} else {
						this.historytableData = [];
						this.ishistoryloading = false;
					}
				})  
			},
			// 获取题材占比
			getThemeChart(mc) {
				this.isthemeChartloading = true;
				let apiMap = { "1": "getTeleplayGenresRateList", "2": "getFilmGenresRateList" } 
				API[`${apiMap[this.sourceType]}`]({ mc: mc }).then((res) => {
					this.isthemeChartloading = false;
					if (res.data[0].plan.length !== 0 || res.data[0].release.length !== 0) {
						// console.log(res.data[0])
						this.hasthemeChartData = false;
						if (res.data[0].plan.length !== 0) {
							this.themeItem1.name = res.data[0].plan[0].lx;
							this.themeItem1.total = parseInt(res.data[0].plan[0].total) * 100 + '%';
						}
						var data1 = []
						for (let i in res.data[0].plan) {
							data1.push({
								name: res.data[0].plan[i].lx,
								total: parseInt(res.data[0].plan[i].total)
							})
						}
						this.pieSelectChart('compertheme1', data1, 0)
					
						if (res.data[0].release.length !== 0) {
							this.themeItem2.name = res.data[0].release[0].lx;
							this.themeItem2.total = parseInt(res.data[0].release[0].total) * 100 + '%';
							var data2 = []
							for (let i in res.data[0].release) {
								data2.push({
									name: res.data[0].release[i].lx,
									total: parseInt(res.data[0].release[i].total)
								})
							}
							this.pieSelectChart('compertheme2', data2, 0)
						}
					} else {
						this.themeItem1 = '';
						this.themeItem2 = '';
						this.hasthemeChartData = true;
					}
				})
		      
			},
		  //环状图
		  pieSelectChart(id, data, type) {
		    this.chartComponent = this.selectComponent('#' + id);
		    this.chartComponent.init((canvas, width, height) => {
		      var chart = new F2.Chart({
		        el: canvas,
		        width,
		        height
		      });
		      chart.source(data, {
		        percent: {
		          formatter: function formatter(val) {
		            return val * 100 + '%';
		          }
		        }
		      });
		      // chart.legend({
		      // 	position: 'bottom',
		      // 	align: 'center'
		      // });
		      chart.legend(false)
		      chart.tooltip(false)
		      chart.coord('polar', {
		        transposed: true,
		        radius: 0.95,
		        innerRadius: 0.8
		      });
		      chart.axis(false)
		      chart
		        .interval()
		        .position('a*total')
		        .color('name')
		        .adjust('stack')
		        .style({
		          lineWidth: 1,
		          stroke: '#fff',
		          lineJoin: 'round',
		          lineCap: 'round'
		        });
		
		      chart.interaction('pie-select', {
		        cancelable: false, // 不允许取消选中
		        animate: {
		          duration: 300,
		          easing: 'backOut'
		        },
		        defaultSelected: {
		          name: data[0].name,
		          total: data[0].total * 100 + '%'
		        },
		        onEnd: (ev) => {
		          const { shape, data, shapeInfo, selected } = ev;
		          if (shape) {
		            if (selected) {
		              if (type === 0) {
		                this.setData({
		                  themeItem1: {
		                    name: data.name,
		                    total: data.total * 100 + '%'
		                  }
		                })
		              }
		              if (type === 1) {
		                this.setData({
		                  themeItem2: {
		                    name: data.name,
		                    total: data.total * 100 + '%'
		                  }
		                })
		              }
		
		            }
		          }
		        }
		      });
		      chart.render()
		      return chart
		    })
		  }
		}
	}
</script>

<style scoped>
	@import '../../pages/index/RankingList/ranking.wxss';
	.th, .td{
		height: 60rpx;
	}
	.w1{
		width: 50%;
	}
	.w2{
		width: 20%;
	}
	.w3{
		width: 10%;
	}
	.w4{
		width: 10%;
	}
	.w5{
		width: 10%;
	}
	.sd-header{
		background: -webkit-gradient(linear,center top,center bottom,from(#212a3f), to(#2c3f62));
		display: flex;
		padding: 30rpx 40rpx;
	}
	.sd-mainpic {
		width: 230rpx;
		max-height: 350rpx;
		margin-right: 30rpx;
		-webkit-box-flex: 0;
		-webkit-flex: none;
		flex: none;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
	.sd-mainpic image{
		width: 200rpx;
		max-height:320rpx;
		padding: 10rpx;
		border: 5rpx solid #777c87;
	}
	.sd-main-name{
		color: #f2f5f7;
		font-size: 30rpx;
		line-height: 1.5;
		margin-bottom: 10rpx;
		font-weight: bold;
	}
	.sd-main-list{
	padding-top: 15rpx;
	}
	.sd-main-list-item{
		margin-bottom: 10rpx;
		line-height: 1.5;
		color: #f2f5f7;
		font-size:24rpx;
	  overflow:hidden; 
	  text-overflow:ellipsis;
	  display:-webkit-box; 
	  -webkit-box-orient:vertical;
	  -webkit-line-clamp:1;
	}
	.sd-main-list-item.active {
	  height: auto; 
	  word-break:break-all; 
	  white-space: pre-wrap;  
	  text-decoration: none;
	  -webkit-line-clamp:unset;
	}
	.rating_self{
		display: flex;
	}
	.rating_star{
		margin-right: 10rpx;
	}
	.rating_num{
		display: inline-block;
		padding-left: 15rpx;
	/* 	
		color: #f2f5f7;
		font-size: 22rpx;
		line-height:25px;
		height: 25px;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center; */
	}
	.rating_num text{
		font-size: 40rpx;
		color: #f8cb73;
		font-weight: bold;
		font-style: italic;
	}
	
	.tab-class {
	  transition: all 0.25s ease-in-out;
	}
	.tabs-bomt-blue .van-tabs__line{
		background-color:#0072ff;
	}
	.tabs-bomt-blue .van-tab--active{
		color: #0072ff;
	}
	.sd-item{
		margin-top: 20rpx;
	}
	.role-info{
		text-align: center;
		margin-bottom: 15px;
		height: 220rpx;
	}
	.role-info .avatar{
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		overflow: hidden;
		display: inline-block;
		margin-bottom: 15rpx;
		position: relative;
		z-index: 2;
	}
	.role-info .avatar image{
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate3d(0, -50%, 0);
		width: 120rpx;
	}
	.role-info .name{
		font-size: 22rpx;
		line-height: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		color: #2c2e33;
		margin-bottom: 10rpx;
	}
	.role-info .role{
		font-size: 20rpx;
		line-height: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		color: #c6c7c8;
	}
	.chartInnerText{
		position:absolute;
		left:50%;
		top:40%;
		transform:translate3d(-50%,0,0);
		display:block;
		text-align:center;
		width:250rpx;
	}
	.chartInnerText .name{
		font-size: 22rpx;
		color: #666;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.chartInnerText .value{
		font-size: 36rpx;
		/* color: #e51c23; */
		font-weight: bold;
	}
	.chartbomtText {
		text-align:center;
		font-size: 26rpx;
		color: #333;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.sd-card {
	  margin-bottom:20rpx;
	  background:#fff;
	}
	.sd-card-title {
	  border-bottom:1px solid #e7e6e6;
	  padding:20rpx 30rpx 15rpx;
	  color:#2c2e33;
	  font-size:30rpx;
	}
	.sd-card-title .icon {
	  margin-right:12rpx;
	}
	
	.sd-card-cont {
	  padding:30rpx;
	  position:relative;
	  z-index:1;
	}
	.nodata{
		width: 100%;
		height: 500rpx;
		padding: 190rpx 0 0;
		text-align: center;
		background: url(https://cdn.xtde.cn/wxapp/xtde/nodata.png) no-repeat center 50rpx;
		background-size: 83% auto;
		color: #999;
		font-size: 30rpx;
		line-height: 1.5;
	}
	
	.skeleton-table-item .van-col {
		text-align: center;
		padding: 15rpx 0; 
	}
	
</style>
